import * as api from '@/services/broadcastIp';
import { DrawerForm, ProFormInstance } from '@ant-design/pro-form';
import type { ProColumns } from '@ant-design/pro-table';
import { EditableProTable } from '@ant-design/pro-table';
import { message } from 'antd';
import React, { useRef, useState } from 'react';

type VpnServerFormProps = {
  visible: boolean;
  servers: API.CheckReport[] | undefined;
  onCancel: () => void;
  onSubmit: () => void;
};

const VpnServerForm: React.FC<VpnServerFormProps> = (props) => {
  const { visible, servers, onCancel, onSubmit } =
    props;

  if (!visible || !servers) {
    return null;
  }

  const formRef = useRef<ProFormInstance>();


  let ds : API.BroadcastIpFormInstance[] = [];
  let dsIds : string[] = [];
  for(let ser of servers){
    if(ser.data){
      for(let sd of ser.data){
        ds.push({
          instanceId: ser.instanceId,
          instanceName: ser.serverName,
          ip: sd.ip
        });
        dsIds.push(sd.ip);
      }
    }
  }
  
  const [serverEditableKeys, setServerEditableKeys] = useState<React.Key[]>(dsIds);
  const [dataSource, setDataSource] = useState<API.BroadcastIpFormInstance[]>(ds);


  const handleFormSubmit = async () => {
    if(!dataSource || dataSource.length == 0){
      message.error("检测不能为空");
      return;
    }

    let record : API.BroadcastIpForm = {
      action: 'change',
      instances: dataSource
    };
    
    // console.log(record);
    // return;
    const result = await api.changeIps(record);
    if (result && result.success) {
      message.success("操作成功");
      onSubmit();
    }
  };
  

  

  const serverColumns: ProColumns<API.BroadcastIpFormInstance>[] = [
    {
      title: 'IP',
      dataIndex: 'ip',
      readonly: true,
      width: 200,
    },
    {
      title: '实例ID',
      dataIndex: 'instanceId',
      readonly: true,
      width: 150,
    },
    {
      title: '名称',
      dataIndex: 'instanceName',
      readonly: true,
    },
    {
      title: '操作',
      valueType: 'option',
      width: 60,
    },
  ];


  return (
    <DrawerForm
      open={visible}
      title='更换广播IP'
      formRef={formRef}
      autoFocusFirstInput
      width={1224}
      onFinish={handleFormSubmit}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        // closable: false,
        onClose: onCancel,
        maskClosable: false,
      }}
    >
      
      <EditableProTable<API.BroadcastIpFormInstance>
        rowKey="ip"
        headerTitle="广播IP更换列表"
        locale={{ emptyText: '暂无数据' }}
        columns={serverColumns}
        defaultValue={dataSource}
        // onChange={setDataSource}
        onChange={(value: API.BroadcastIpFormInstance[]) => {
          // console.log(value);
          setDataSource(value);
        }}
        recordCreatorProps={false}
        editable={{
          type: 'multiple',
          editableKeys: serverEditableKeys,
          actionRender: (row, config, defaultDom) => [
            defaultDom.delete,
          ],
          onValuesChange: (record, recordList) => {
            setDataSource(recordList);
          },
          onChange: setServerEditableKeys,
        }}
      />

    </DrawerForm>
  );
};

export default VpnServerForm;
